import React from 'react';
import { Link,browserHistory } from 'react-router';
import {Button} from 'antd';
//button边框
const buttonBorder = {
  border:'1px #108EE9 solid'
};

//button按钮点击事件
const buttonClick = function (e) {
  let self = e.currentTarget;
  $('#top-nav').find('button').css({border:'1px #D9D9D9 solid'});
  $(self).find('button').css(buttonBorder);
};


let List = React.createClass({
  render() {
    return (
      <span onClick={buttonClick.bind(this)}>
        {this.props.children}
      </span>
    );
  }
});

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      primary:browserHistory.getCurrentLocation().pathname,
    };
  };

  //第一次渲染完成后调用
  componentDidMount(){
    $('#top-nav').find('button[data-key="'+this.state.primary+'"]').css(buttonBorder);
  }

  render() {
    return (
      <div id="Domain">
        <div id="top-nav">
          <List>
            <Button data-key="/admin">
              <a href="/admin/base">基本设置</a>
            </Button>
          </List>
          <List>
            <Button data-key="/admin">
              <a href="/admin/list">所有图片</a>
            </Button>
          </List>
          <List>
            <Button data-key="/admin/add">
              <a href="/admin/add">添加图片</a>
            </Button>
          </List>
          <List>
            <Button data-key="/admin/class">
              <a href="/admin/class">图片分类</a>
            </Button>
          </List>
          <List>
            <Button data-key="/admin/class/add">
              <Link to="/admin/class/add">添加分类</Link>
            </Button>
          </List>
        </div>
        <div className="tabs">
          {this.props.children}
        </div>
      </div>
    );
  }
}


export default App